<!DOCTYPE html>
<html lang="en">
  <head>
    <title>brain.js tutorial</title>
    <style>
      .articleImage {
        width: 180px;
      }

      .ratingItem {
        padding-bottom: 30px;
      }

      .suggestedItems {
        display: flex;
        flex-wrap: wrap;
        width: 650px;
      }

      .suggestionItem {
        padding-right: 15px;
        padding-top: 30px;
      }
    </style>
  </head>

  <body onLoad="nextTry();">
    <script src="https://unpkg.com/brain.js"></script>
    <script src="itemsInStock.js"></script>
    <script>
      const color_normalization_factor = 100;
      const neckline_normalization_factor = 10;
      const price_normalization_factor = 100;

      let trainingData = [
        {
          input: {
            color: color_black,
            hasPrinting: false,
            neckline: neckline_round,
            price: 0.1999,
          },
          output: { wanted: 0 },
        },
      ];
      let ratingItem;

      function nextTry(rating) {
        document.getElementById('result').innerHTML = '';

        if (undefined !== ratingItem) {
          trainingData.push({
            input: ratingItem.trainingInformation,
            output: { wanted: rating / 4 },
          });
        }

        const network = new brain.NeuralNetwork({
          activation: 'sigmoid',
          hiddenLayers: [4],
        });
        network.train(trainingData);

        let suggestionItemsText = '';
        let suggestionItems = [];
        for (let i = 0; i < itemsInStock.length; i++) {
          let item = getNormalizedItemFromStock(i);
          item.wanted = network.run(item.trainingInformation).wanted;
          suggestionItems.push(item);
        }

        suggestionItems.sort(function (a, b) {
          return b.wanted - a.wanted;
        });

        for (let i = 0; i < suggestionItems.length; i++) {
          const suggestionItem = suggestionItems[i];
          suggestionItemsText +=
            '<div class="suggestionItem">' +
            getFormattedItem(suggestionItem) +
            ' <br/> ' +
            'wanted: ' +
            Math.round(suggestionItem.wanted * 100) +
            '%' +
            '</div>';
        }

        ratingItem = getNormalizedItemFromStock(
          Math.floor(Math.random() * itemsInStock.length - 1 + 1)
        );
        document.getElementById('result').innerHTML +=
          '<div class="ratingItem">' +
          'Rate this:<br/>' +
          getFormattedItem(ratingItem) +
          '<br/>' +
          '</div>' +
          'Suggested items:<br/>' +
          '<div class="suggestedItems">' +
          suggestionItemsText +
          '</div>';
      }

      function getNormalizedItemFromStock(index) {
        const item = itemsInStock[index];
        const trainingInformation = item.trainingInformation;
        return {
          trainingInformation: {
            color: trainingInformation.color / color_normalization_factor,
            hasPrinting: trainingInformation.hasPrinting,
            neckline:
              trainingInformation.neckline / neckline_normalization_factor,
            price: trainingInformation.price / price_normalization_factor,
          },
          displayingInformation: item.displayingInformation,
        };
      }

      function getFormattedItem(item) {
        const trainingInformation = item.trainingInformation;
        const formattedItem =
          '<img class="articleImage" src="images/articles/' +
          item.displayingInformation.imageFile +
          '"/><br/>' +
          'color: ' +
          getColorName(trainingInformation.color) +
          '<br/>' +
          'has printing?: ' +
          (1 === trainingInformation.hasPrinting ? 'yes' : 'no') +
          '<br/>' +
          'neckline: ' +
          getNecklineName(trainingInformation.neckline) +
          '<br/>' +
          'price: ' +
          Math.round(
            trainingInformation.price * price_normalization_factor * 100
          ) /
            100 +
          ' &euro;';
        return formattedItem;
      }

      function getColorName(color) {
        const id = color * color_normalization_factor;
        const lookup = {
          [color_black]: 'black',
          [color_blue]: 'blue',
          [color_darkblue]: 'dark blue',
          [color_gray]: 'gray',
          [color_green]: 'green',
          [color_lightblue]: 'light blue',
          [color_lightgreen]: 'light green',
          [color_skin]: 'skin',
          [color_turqoise]: 'turqoise',
          [color_white]: 'white',
        };
        const name = lookup[id] || '';
        console.log('color:', name);
        return name;
      }

      function getNecklineName(color) {
        const id = color * neckline_normalization_factor;
        const lookup = {
          [neckline_round]: 'round',
          [neckline_v]: 'v',
        };
        const name = lookup[id] || '';
        console.log('neckline:', name);
        return name;
      }
    </script>

    <center>
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <input type="button" value="1" onClick="nextTry(0);" />
      <input type="button" value="2" onClick="nextTry(1);" />
      <input type="button" value="3" onClick="nextTry(2);" />
      <input type="button" value="4" onClick="nextTry(3);" />
      <input type="button" value="5" onClick="nextTry(4);" />
      <br />
      <br />
      <div id="result"></div>
    </center>
  </body>
</html>
